<template>
	<view class="content">
		<view style="height: 100%;">
			<view style="display: flex;height: 80px;padding-top: 40px;
	   padding-left: 40px;color: #fff;">江苏省·姜堰</view>
			<view style="display: flex;justify-content: center;color: #fff;
	   height: 40px;font-size: 26px;font-weight: 500;
	   justify-items: center;">姜堰污水厂智慧水务管理平台</view>
			<view style="display: flex;padding: 50rpx;">
				<view>
					<view style="background-color: #fff;width: 300rpx;
		   height: 450rpx;border-radius: 30rpx;position: relative;" @click="gotoPage('/pages/index/waterQuality')">
						<view style="padding: 40rpx 40rpx 10rpx 40rpx;font-size: 20px;font-weight: 700;">水质在线</view>
						<view style="padding:0rpx 40rpx 0rpx 60rpx;font-size: 20px;font-weight: 700;">
							<image src="../static/images/0421-13.png" style="width: 20px;height: 20px;"></image>
						</view>
						<view
							style="margin-top: 0rpx;font-size: 20px;font-weight: 700;position: absolute;bottom: 20rpx;right: 20rpx;">
							<image src="../static/images/111.png" style="width: 60px;height: 60px;"></image>
						</view>

					</view>
				</view>
				<view style="margin-left: 50rpx;">
					<view style="width: 300rpx;height: 200rpx;
			   background-color: #fff;border-radius: 30rpx;position: relative;"
						@click="gotoPage('/pages/index/laboratoryData')">
						<view style="padding: 40rpx 40rpx 0rpx 40rpx;font-size: 20px;font-weight: 700;">化验室数据</view>
						<view style="padding:0rpx 40rpx 0rpx 60rpx;font-size: 20px;font-weight: 700;">
							<image src="../static/images/0421-13.png" style="width: 15px;height: 15px;"></image>
						</view>
						<view
							style="margin-top: 0rpx;font-size: 20px;font-weight: 700;position: absolute;bottom: 20rpx;right: 20rpx;">
							<image src="../static/images/0421-12.png" style="width: 50px;height: 40px;"></image>
						</view>
					</view>
					<view
						style="width: 300rpx;height: 200rpx; margin-top: 50rpx;background-color: #fff;border-radius: 30rpx;position: relative;"
						@click="gotoPage('/pages/index/repair')">
						<view style="padding: 40rpx 40rpx 0rpx 40rpx;font-size: 20px;font-weight: 700;">维修</view>
						<view style="padding:0rpx 40rpx 0rpx 60rpx;font-size: 20px;font-weight: 700;">
							<image src="../static/images/0421-13.png" style="width: 15px;height: 15px;"></image>
						</view>
						<view
							style="margin-top: 0rpx;font-size: 20px;font-weight: 700;position: absolute;bottom: 20rpx;right: 20rpx;">
							<image src="../static/images/0421-10.png" style="width: 50px;height: 50px;"></image>
						</view>
					</view>
				</view>
			</view>
			<view style="display: flex;padding: 50rpx;margin-top: -50rpx;">
				<view style="background-color: #fff;width: 300rpx;
	   		   height: 200rpx;border-radius: 30rpx;position: relative;" @click="gotoPage('/pages/index/maintenancePlan')">
					<view style="padding: 40rpx 40rpx 0rpx 40rpx;font-size: 20px;font-weight: 700;">保养</view>
					<view style="padding:0rpx 40rpx 0rpx 60rpx;font-size: 20px;font-weight: 700;">
						<image src="../static/images/0421-13.png" style="width: 15px;height: 15px;"></image>
					</view>
					<view
						style="margin-top: 0rpx;font-size: 20px;font-weight: 700;position: absolute;bottom: 20rpx;right: 20rpx;">
						<image src="../static/images/0421-08.png" style="width: 60px;height: 50px;"></image>
					</view>
				</view>
				<view style="background-color: #fff;width: 300rpx;margin-left: 50rpx;
			   height: 200rpx;border-radius: 30rpx;position: relative;" @click="gotoPage('/pages/index/craft')">
					<view style="padding: 40rpx 40rpx 0rpx 40rpx;font-size: 20px;font-weight: 700;">设备</view>
					<view style="padding:0rpx 40rpx 0rpx 60rpx;font-size: 20px;font-weight: 700;">
						<image src="../static/images/0421-13.png" style="width: 15px;height: 15px;"></image>
					</view>
					<view
						style="margin-top: 0rpx;font-size: 20px;font-weight: 700;position: absolute;bottom: 20rpx;right: 20rpx;">
						<image src="../static/images/0421-09.png" style="width: 50px;height: 50px;"></image>
					</view>
				</view>

			</view>
			<view style="display: flex;padding: 50rpx;margin-top: -50rpx;">
				<view>
					<view style="background-color: #fff;width: 300rpx;
	   		   height: 450rpx;border-radius: 30rpx;position: relative;" @click="gotoPage('/pages/index/inspection')">
						<view style="padding: 40rpx 40rpx 0rpx 40rpx;font-size: 20px;font-weight: 700;">巡检</view>
						<view style="padding:0rpx 40rpx 0rpx 60rpx;font-size: 20px;font-weight: 700;">
							<image src="../static/images/0421-13.png" style="width: 15px;height: 15px;"></image>
						</view>
						<view
							style="margin-top: 0rpx;font-size: 20px;font-weight: 700;position: absolute;bottom: 20rpx;right: 20rpx;">
							<image src="../static/images/0421-05.png" style="width: 50px;height: 50px;"></image>
						</view>
					</view>
				</view>
				<view style="margin-left: 50rpx;">
					<view style="width: 300rpx;height: 200rpx;
	   			   background-color: #fff;border-radius: 30rpx;position: relative;" @click="gotoPage('/pages/index/monitor')">
						<view style="padding: 40rpx 40rpx 0rpx 40rpx;font-size: 20px;font-weight: 700;">监控</view>
						<view style="padding:0rpx 40rpx 0rpx 60rpx;font-size: 20px;font-weight: 700;">
							<image src="../static/images/0421-13.png" style="width: 15px;height: 15px;"></image>
						</view>
						<view
							style="margin-top: 0rpx;font-size: 20px;font-weight: 700;position: absolute;bottom: 20rpx;right: 20rpx;">
							<image src="../static/images/0421-06.png" style="width: 60px;height: 50px;"></image>
						</view>
					</view>
					<view style="width: 300rpx;height: 200rpx;
	   			   margin-top: 50rpx;
	   			   background-color: #fff;border-radius: 30rpx;position: relative;" @click="gotoPage('/pages/index/alarm')">
						<view style="padding: 40rpx 40rpx 0rpx 40rpx;font-size: 20px;font-weight: 700;">报警</view>
						<view style="padding:0rpx 40rpx 0rpx 60rpx;font-size: 20px;font-weight: 700;">
							<image src="../static/images/0421-13.png" style="width: 15px;height: 15px;"></image>
						</view>
						<view
							style="margin-top: 0rpx;font-size: 20px;font-weight: 700;position: absolute;bottom: 20rpx;right: 20rpx;">
							<image src="../static/images/0421-07.png" style="width: 60px;height: 50px;"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad: function() {
			uni.hideTabBar()
		},
		methods: {
			gotoPage(url) {
				console.log(url)
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	.content {
		background: url('../static/images/0421-03.png');
		background-size: cover; /* 背景图片覆盖整个容器 */
		    background-position: center; /* 背景图片居中 */
		    background-repeat: no-repeat; /* 背景图片不重复 */
		    position: fixed; /* 背景图片固定定位 */
		    top: 0;
		    left: 0;
		    right: 0;
		    bottom: 0;
		    z-index: -1; /* 确保背景在其他内容下方 */
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>